{% extends 'base.html' %}
{% block title %}Portfolio{% endblock %}
{% block content %}

<!-- component -->
<!-- <div class="flex justify-center items-center min-h-screen">
    <div class="max-w-[720px] mx-auto">
        <div class="block mb-4 mx-auto border-b border-slate-300 pb-2 max-w-[360px]">
            <a 
                target="_blank" 
                href="https://www.material-tailwind.com/docs/html/card" 
                class="block w-full px-4 py-2 text-center text-slate-700 transition-all"
            >
                More components on <b>Material Tailwind</b>.
            </a>
        </div>

        <div class="relative flex flex-col mt-6 text-gray-700 bg-white shadow-md bg-clip-border rounded-xl w-96">
            <div
                class="relative h-56 mx-4 -mt-6 overflow-hidden text-white shadow-lg bg-clip-border rounded-xl bg-blue-gray-500 shadow-blue-gray-500/40">
                <img
                    src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80"
                    alt="card-image" />
            </div>
            <div class="p-6">
                <h5 class="block mb-2 font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
                    UI/UX Review Check
                </h5>
                <p class="block font-sans text-base antialiased font-light leading-relaxed text-inherit">
                    The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio"
                    where you can enjoy the main night life in Barcelona.
                </p>
            </div>
            <div class="p-6 pt-0">
                <button
                    class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
                    type="button">
                    Read More
                </button>
            </div>
        </div>
    </div>
</div> -->


<div class="container mx-auto px-1 py-8">
  <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-2">
    <!-- 作品项 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
      <img referrerPolicy="no-referrer" class="w-full  aspect-w-16 aspect-h-9 object-cover" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/14fjWttdpzbRaoDiaqTOm6pibpcpqP4ibL0icSiaKq5qjCicdSaibdibSzoEmAxH0lpqGVzwFcTaD6VsdicMicOjp5wFE4bw/640?wx_fmt=jpeg&amp;from=appmsg" alt="作品图片">
      <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">人迹</h2>
        <p class="text-gray-700 text-sm dark:text-gray-300">人生就是反复横跳，也本该反复横跳。</p>
      </div>
    </div>
    <!-- 重复以上作品项结构，根据需要添加更多作品 -->
    <!-- 作品项 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
      <img class="w-full aspect-w-16 aspect-h-9 object-cover" src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="作品图片">
      <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">作品标题</h2>
        <p class="text-gray-700 text-sm dark:text-gray-300">作品描述</p>
      </div>
    </div>
    <!-- 重复以上作品项结构，根据需要添加更多作品 -->
    <!-- 作品项 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
      <img class="w-full aspect-w-16 aspect-h-9 object-cover" src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="作品图片">
      <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">作品标题</h2>
        <p class="text-gray-700 text-sm dark:text-gray-300">作品描述</p>
      </div>
    </div>
    <!-- 重复以上作品项结构，根据需要添加更多作品 -->
    <!-- 作品项 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
      <img class="w-full aspect-w-16 aspect-h-9 object-cover" src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="作品图片">
      <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">作品标题</h2>
        <p class="text-gray-700 text-sm dark:text-gray-300">作品描述</p>
      </div>
    </div>
    <!-- 重复以上作品项结构，根据需要添加更多作品 -->
    <!-- 作品项 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
      <img class="w-full aspect-w-16 aspect-h-9 object-cover" src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="作品图片">
      <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">作品标题</h2>
        <p class="text-gray-700 text-sm dark:text-gray-300">作品描述</p>
      </div>
    </div>
    <!-- 重复以上作品项结构，根据需要添加更多作品 -->
    
  </div>
</div>


{% endblock %}